<template>
	<div>
    <div>
      <p class="module-title display-inline-block">{{cardTitle}}</p>
      <router-link :to="cardContent.moreLink" class="more-link secondary-text">{{$t('message.more')}}</router-link>
    </div>
		<el-card shadow="never" class="edu-workbench-card" body-style="padding: 12px 24px;">
      <div class="edu-card-item" v-for="(item, index) in cardContent.list" :key="index">
        <div class="item-icon" :class="item.type"></div>
        <a href="#" class="item-text">{{item.text}}</a>
        <div v-if="item.isNew" class="item-flag"></div>
        <div class="item-date">{{item.date}}</div>
      </div>
    </el-card>
	</div>
</template>
<script>
export default {
  name: "CommonCard",
  props: ["cardContent", "cardTitle"],
  data() {
    return {};
  }
};
</script>
<style lang="scss" scoped>
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
.more-link {
  float: right;
  display: block;
  margin-top: 20px;
  font-size: 12px;
}
.common-list {
  list-style-type: none;
}
.common-list li {
  line-height: 32px;
  font-size: 12px;
  padding: 0 8px;
}
.common-list li:nth-child(2n) {
  background: #f5f5f5;
}
.common-list li:hover {
  background: #e0e4e8;
}
.common-list li span {
  float: right;
}
.common-list li i {
  font-size: 16px;
}
.edu-card-item {
  line-height: 32px;
  padding: 12px 0;
  width: 100%;
  font-size: 14px;
  @include clearfix();
  .item-icon,
  .item-text,
  .item-flag {
    float: left;
  }
  .item-icon {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    background: url("/static/images/icon_systemnotice.png");
    &.doc {
      background: url("/static/images/icon_file_word.png");
    }
    &.pdf {
      background: url("/static/images/icon_file_pdf.png");
    }
    &.ppt {
      background: url("/static/images/icon_file_ppt.png");
    }
    &.xls {
      background: url("/static/images/icon_file_excel.png");
    }
  }
  .item-flag {
    margin-left: 4px;
    width: 40px;
    height: 16px;
    margin-top: 8px;
    background: url("/static/images/icon_newnotice.png");
  }
  .item-date {
    color: #999999;
    float: right;
  }
}
</style>